<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户关系管理系统 - 主界面</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 侧边导航栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h2>CRM系统</h2>
        </div>
        
        <ul class="sidebar-menu">
            <li class="menu-item active" data-target="dashboard">
                <i class="fas fa-chart-line"></i>
                <span>数据概览</span>
            </li>
            <li class="menu-item" data-target="customers">
                <i class="fas fa-users"></i>
                <span>客户管理</span>
            </li>
            <li class="menu-item" data-target="contacts">
                <i class="fas fa-address-book"></i>
                <span>联系人管理</span>
            </li>
            <li class="menu-item" data-target="activities">
                <i class="fas fa-calendar-alt"></i>
                <span>跟进活动</span>
            </li>
            <li class="menu-item" data-target="sales">
                <i class="fas fa-chart-pie"></i>
                <span>销售漏斗</span>
            </li>
            <li class="menu-item" data-target="reports">
                <i class="fas fa-chart-bar"></i>
                <span>统计分析</span>
            </li>
        </ul>
        
        <div class="sidebar-footer">
            <div class="user-info">
                <div class="user-avatar">
                    <img src="assets/img/avatar-placeholder.png" alt="用户头像">
                </div>
                <div class="user-details">
                    <span class="user-name" id="currentUsername">管理员</span>
                    <span class="user-role">系统管理员</span>
                </div>
            </div>
            <button id="logoutBtn" class="logout-btn">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
            </button>
        </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部栏 -->
        <header class="top-bar">
            <div class="top-bar-left">
                <button id="toggleSidebarBtn" class="toggle-sidebar-btn">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="page-title">
                    <h1>数据概览</h1>
                </div>
            </div>
            
            <div class="top-bar-right">
                <div class="search-box">
                    <input type="text" placeholder="搜索...">
                    <i class="fas fa-search"></i>
                </div>
                
                <div class="notification-bell">
                    <button class="notification-btn">
                        <i class="fas fa-bell"></i>
                        <span class="notification-badge">3</span>
                    </button>
                </div>
                
                <div class="settings-icon">
                    <button class="settings-btn">
                        <i class="fas fa-cog"></i>
                    </button>
                </div>
            </div>
        </header>
        
        <!-- 内容面板 -->
        <div class="content-wrapper">
            <!-- 仪表盘面板 -->
            <div id="dashboard" class="panel active">
                <!-- 统计卡片区域 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon bg-primary">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-content">
                            <h3>总客户数</h3>
                            <p class="stat-value">1,289</p>
                            <span class="stat-change positive">+3.2%</span>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon bg-secondary">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <div class="stat-content">
                            <h3>本月新增</h3>
                            <p class="stat-value">48</p>
                            <span class="stat-change positive">+8.5%</span>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon bg-success">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div class="stat-content">
                            <h3>本月销售</h3>
                            <p class="stat-value">¥1,289,450</p>
                            <span class="stat-change positive">+12.8%</span>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon bg-danger">
                            <i class="fas fa-chart-pie"></i>
                        </div>
                        <div class="stat-content">
                            <h3>转化率</h3>
                            <p class="stat-value">28.5%</p>
                            <span class="stat-change negative">-2.1%</span>
                        </div>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <div class="charts-grid">
                    <div class="chart-card">
                        <div class="chart-header">
                            <h3>客户增长趋势</h3>
                            <div class="chart-period">
                                <button class="chart-period-btn active">月度</button>
                                <button class="chart-period-btn">季度</button>
                                <button class="chart-period-btn">年度</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="customerGrowthChart"></canvas>
                        </div>
                    </div>
                    
                    <div class="chart-card">
                        <div class="chart-header">
                            <h3>销售业绩分布</h3>
                            <div class="chart-period">
                                <button class="chart-period-btn active">本月</button>
                                <button class="chart-period-btn">上月</button>
                                <button class="chart-period-btn">全年</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="salesDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 最近活动 -->
                <div class="recent-activities">
                    <div class="activities-header">
                        <h3>最近活动</h3>
                        <a href="#" class="view-all-link">查看全部</a>
                    </div>
                    <div class="activities-list">
                        <!-- 活动项示例 -->
                        <div class="activity-item">
                            <div class="activity-icon bg-primary">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="activity-content">
                                <p><strong>添加新客户</strong> 比亚迪汽车有限公司</p>
                                <span class="activity-time">10分钟前</span>
                            </div>
                        </div>
                        
                        <div class="activity-item">
                            <div class="activity-icon bg-success">
                                <i class="fas fa-comment"></i>
                            </div>
                            <div class="activity-content">
                                <p><strong>客户跟进</strong> 与华为技术有限公司进行电话沟通</p>
                                <span class="activity-time">30分钟前</span>
                            </div>
                        </div>
                        
                        <div class="activity-item">
                            <div class="activity-icon bg-warning">
                                <i class="fas fa-file-invoice-dollar"></i>
                            </div>
                            <div class="activity-content">
                                <p><strong>新订单</strong> 来自小米科技有限责任公司的订单已创建</p>
                                <span class="activity-time">2小时前</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 客户管理面板 -->
            <div id="customers" class="panel">
                <div class="panel-header">
                    <h2>客户管理</h2>
                    <button id="addCustomerBtn" class="add-btn">
                        <i class="fas fa-plus"></i>
                        <span>添加客户</span>
                    </button>
                </div>
                
                <div class="filter-section">
                    <div class="filter-controls">
                        <div class="filter-group">
                            <label>客户类型</label>
                            <select id="customerTypeFilter">
                                <option value="all">全部</option>
                                <option value="enterprise">企业客户</option>
                                <option value="individual">个人客户</option>
                            </select>
                        </div>
                        
                        <div class="filter-group">
                            <label>地区</label>
                            <select id="regionFilter">
                                <option value="all">全部</option>
                                <option value="north">华北</option>
                                <option value="south">华南</option>
                                <option value="east">华东</option>
                                <option value="west">西南</option>
                                <option value="central">华中</option>
                            </select>
                        </div>
                        
                        <div class="filter-group">
                            <label>状态</label>
                            <select id="statusFilter">
                                <option value="all">全部</option>
                                <option value="active">活跃</option>
                                <option value="inactive">不活跃</option>
                                <option value="potential">潜在客户</option>
                            </select>
                        </div>
                        
                        <button id="applyFiltersBtn" class="apply-filters-btn">应用筛选</button>
                    </div>
                </div>
                
                <div class="table-container">
                    <table id="customersTable" class="data-table">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="selectAllCustomers"></th>
                                <th>客户名称 <i class="fas fa-sort"></i></th>
                                <th>联系人 <i class="fas fa-sort"></i></th>
                                <th>电话 <i class="fas fa-sort"></i></th>
                                <th>邮箱 <i class="fas fa-sort"></i></th>
                                <th>类型 <i class="fas fa-sort"></i></th>
                                <th>状态 <i class="fas fa-sort"></i></th>
                                <th>创建日期 <i class="fas fa-sort-down"></i></th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 表格数据由JavaScript动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <div class="pagination">
                    <button class="pagination-btn prev" disabled>
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="pagination-btn active">1</button>
                    <button class="pagination-btn">2</button>
                    <button class="pagination-btn">3</button>
                    <button class="pagination-btn">4</button>
                    <button class="pagination-btn">5</button>
                    <button class="pagination-btn next">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                    <span class="pagination-info">显示 1-10 条，共 56 条</span>
                </div>
            </div>
            
            <!-- 其他面板内容将通过JavaScript动态加载 -->
            <div id="contacts" class="panel">
                <div class="panel-header">
                    <h2>联系人管理</h2>
                    <button class="add-btn">
                        <i class="fas fa-plus"></i>
                        <span>添加联系人</span>
                    </button>
                </div>
                
                <div class="placeholder-content">
                    <div class="placeholder-icon">
                        <i class="fas fa-address-book"></i>
                    </div>
                    <h3>联系人管理功能即将上线</h3>
                    <p>此模块将允许您管理与客户相关的所有联系人信息</p>
                </div>
            </div>
            
            <div id="activities" class="panel">
                <div class="panel-header">
                    <h2>跟进活动记录</h2>
                    <button class="add-btn">
                        <i class="fas fa-plus"></i>
                        <span>添加活动</span>
                    </button>
                </div>
                
                <div class="placeholder-content">
                    <div class="placeholder-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <h3>活动记录功能即将上线</h3>
                    <p>此模块将允许您记录和管理与客户的所有互动活动</p>
                </div>
            </div>
            
            <div id="sales" class="panel">
                <div class="panel-header">
                    <h2>销售漏斗可视化</h2>
                </div>
                
                <div class="placeholder-content">
                    <div class="placeholder-icon">
                        <i class="fas fa-chart-pie"></i>
                    </div>
                    <h3>销售漏斗功能即将上线</h3>
                    <p>此模块将帮助您可视化销售过程中的各个阶段和转化率</p>
                </div>
            </div>
            
            <div id="reports" class="panel">
                <div class="panel-header">
                    <h2>统计分析报表</h2>
                </div>
                
                <div class="placeholder-content">
                    <div class="placeholder-icon">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <h3>报表功能即将上线</h3>
                    <p>此模块将提供全面的数据分析和报表生成功能</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 模态框模板 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">模态框标题</h3>
                <button class="close-modal-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <!-- 模态框内容将动态生成 -->
            </div>
            <div class="modal-footer">
                <button class="modal-btn cancel">取消</button>
                <button class="modal-btn confirm">确定</button>
            </div>
        </div>
    </div>
    
    <!-- 主要JavaScript文件 -->
    <script src="assets/js/utils.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/dashboard.js"></script>
    <script src="assets/js/customers.js"></script>
    <script src="assets/js/sales.js"></script>
    <script src="assets/js/reports.js"></script>
</body>
</html>